<template>
  <div class="container" v-if="flag">
    <div class="login-box">
      <h2>登录</h2>
      <form action="#" method="post" @submit.prevent="login">
        <input
          type="text"
          v-model="account"
          name="account"
          placeholder="account"
          required
        /><br />
        <input
          type="password"
          v-model="password"
          name="password"
          placeholder="Password"
          required
        />
        <p></p>
        <input type="submit" value="登录" />
      </form>
      <p></p>
      <label for="remember">
        <input
          type="checkbox"
          id="remember"
          name="remember"
          v-model="rememberMe"
        />
        记住密码</label
      >
      <a href="#" @click="goToRegister">注册</a>
    </div>
  </div>
  <Register v-else></Register>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import Register from "./components/register.vue";
import { sysStore } from "../../store/sys.js";
import http from "../../util/http.js";
const routerUse = useRouter();
const useSysStore = sysStore();
let account = ref("");
let password = ref("");
let rememberMe = ref(false);
let flag = ref(true);
const goToRegister = () => {
  flag.value = false;
};

const login = () => {
  let temp = {
    account: account.value,
    password: password.value,
  };
  http.post("/user/login", temp, true).then((res) => {
    if (res.code == 200) {
      const result = res.data;
      useSysStore.id = result.user.id;
      useSysStore.account = result.user.account;
      useSysStore.name = result.user.name;
      localStorage.setItem("token", result.token);

      if (rememberMe.value) {
        localStorage.setItem("account", account.value);
        localStorage.setItem("password", password.value);
        localStorage.setItem("rememberMe", "true");
        console.log("保存账号:", account.value);
        console.log("保存密码:", password.value);
      } else {
        localStorage.removeItem("account");
        localStorage.removeItem("password");
        localStorage.setItem("rememberMe", "false");
      }

      routerUse.push("/main");
    }
  });

  const result = {
    token: "qwqwqqwwqqw",
    name: account.value,
  };
};
</script>


<style scoped>
body {
  font-family: Arial, sans-serif;
  background-color: #ffffff;
  text-align: center;
  margin-top: 50px;
  display: flex;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-box {
  width: 300px;
  background-color: #fff;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="text"],
input[type="password"] {
  width: calc(100% - 20px);
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
}
input[type="submit"] {
  background-color: #4da8e9;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  width: 250px;
}
input[type="submit"]:hover {
  background-color: #4da8e9;
}
.checkbox {
  margin-bottom: 10px;
}
a {
  margin-left: 150px;
}
</style>